import React from 'react';
import { withRouter } from 'react-router-dom';
import Topbar from '../../components/Topbar/Topbar';
import './AddExchange.css';
import {ImagePicker,WingBlank}from 'antd-mobile';

class AddExchange extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            files:[],
            files_ok:'',
            userid:localStorage.getItem('userid'),
            username:localStorage.getItem('username'),
            userimage:localStorage.getItem('userimage')
        };
    }

    nameChange(e){
        this.setState({
            name:e.target.value
        })
    }

    priceChange(e){
        this.setState({
            price:e.target.value
        })
    }
    numberChange(e){
        this.setState({
            number:e.target.value
        })
    }
    contextChange(e){
        this.setState({
            context:e.target.value
        })
    }

    groupChange(e){
        this.setState({
            group:e.target.value
        })
    }
    personChange(e){
        this.setState({
            person:e.target.value
        })
    }

    /*显示选择的图片*/
    onChange = (files, type, index) => {
        this.setState({
            files,
        });
    }

    async pushExchange (){
        console.log(this.state.files)

            //实例化一个表单数据对象
            var formData=new FormData();
            console.log(this.state.files[0].file)
            formData.append('fileName',this.state.files[0].file.name);
            formData.append('file',this.state.files[0].file);
            await fetch(`https://www.prebeauty.work/upload`,{
                method:'POST',
                body:formData,
            })
            .then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.status=='done'){
                    this.setState({
                        files_ok:res.name
                    })
                }
                else{
                    alert('添加失败')
                }
            })
        
        //把上传到服务器成功后的图片数组转化为字符串
        console.log(this.state.files_ok)
     
        const param={
            name:this.state.name,
            face:this.state.face,
            price:this.state.price,
            context:this.state.context,
            person:this.state.person,
            number:this.state.number,
            group:this.state.group,
            imgs:this.state.files_ok,
            userid:this.state.userid,
        }
        console.log(param)
        fetch('https://www.prebeauty.work/exchange',{
            method:'POST',
            body:JSON.stringify(param),
            headers:{
                'content-type': 'application/json'
            }
            })
            .then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                this.props.history.push('/Exchange')
        })
    }

    render() {
        const { files } = this.state;
        return (

            <div className="issue">
                <Topbar name="发布信息" />
                
                <label>物品名称</label><br />
                <input className="name" type="text" placeholder="写下物品名称"
                onChange={this.nameChange.bind(this)}></input>

                <label>易物信息</label><br />
                <textarea 
                    className="context" 
                    placeholder="请对交易物品进行描述"
                    onChange={this.contextChange.bind(this)}
                ></textarea>

                <label>物品价格</label><br />
                <input className="price" type="number" placeholder="￥"
                onChange={this.priceChange.bind(this)}></input>

                <label>物品分类</label><br />
                <input className="group" type="text" placeholder="写下物品所属分类"
                onChange={this.groupChange.bind(this)}></input>

                <label>联系方式：</label><br />
                <input type="number" placeholder="写下您的联系方式"
                onChange={this.numberChange.bind(this)}></input>

                <label>联系人：</label><br />
                <input className="person" type="text" placeholder="写下您的称呼"
                onChange={this.personChange.bind(this)}></input>

                
                {/* 上传图片 */}
                <label>物品图片：</label><br />
                <WingBlank>
                    <ImagePicker
                        files={files}
                        onChange={this.onChange}
                        onImageClick={(index, fs) => console.log(index, fs)}
                        selectable={files.length < 1}  
                        multiple={true} 
                    />
                </WingBlank>

                <input 
                    className="btn" 
                    type="button" 
                    value="发布" 
                    onClick={this.pushExchange.bind(this)} 
                ></input>
            </div>
        );
    }
}

export default withRouter(AddExchange);